<template>
  <div class="customer-container">
    <div class="top">
      <div class="data-count br-5" v-for="(item, index) in dataCountListData" :key="index">
        <div class="data-count-wrap">
          <div class="left">
            <div class="title">{{ item.title }}</div>
            <count-to class="num" decimals="," :endVal="item.num"></count-to>
          </div>
        </div>
        <svg-icon :icon-class="item.icon"></svg-icon>
      </div>
    </div>
    <div class="search-wrap">
      <div class="left">
        <el-input placeholder="請輸入客戶名稱"></el-input>
        <el-select style="margin: 0 15px" placeholder="客戶群組">
          <el-option v-for="item in 4" :key="item" :label="item"></el-option>
        </el-select>
        <el-select style="margin-right: 15px" placeholder="客戶來源">
          <el-option v-for="item in 4" :key="item" :label="item"></el-option>
        </el-select>
        <el-date-picker></el-date-picker>
        <div class="btn-list">
          <el-button type="primary">搜索</el-button>
          <el-button>重置</el-button>
        </div>
      </div>
      <div class="right">
        <el-button type="primary" @click.native="addCustomer">
          <svg-icon icon-class="staff-add"></svg-icon>
          新增客户
        </el-button>
      </div>
    </div>
    <div class="table-wrap br-20">
      <h4>訂單列表</h4>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="客戶咨詢">
          <template>
            <div class="awatar-info-wrap">
              <svg-icon icon-class="awatar"></svg-icon>
              <div>
                <div>張三</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="聯絡人信息">
          <template>
            <div class="text-1">張三</div>
          </template>
        </el-table-column>
        <el-table-column label="聯繫電話">
          <template>
            <div>15655558888</div>
          </template>
        </el-table-column>
        <el-table-column label="所屬群組">
          <template>
            <span class="group br-15 vip">貴賓</span>
          </template>
        </el-table-column>
        <el-table-column label="客戶來源">
          <template> 廣告</template>
        </el-table-column>
        <el-table-column label="添加時間">
          <template>
            <div>2020-07-20</div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template>
            <el-button type="text" size="small" @click.native="customerDetail">查看</el-button>
            <el-button type="text" size="small" @click.native="editCustomer">編輯</el-button>
            <el-button type="text" size="small">刪除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-foot">
        <div class="statistics">共24名員工 最近更新:2025-07-27 10:45</div>
        <div>
          <el-pagination background layout="sizes, prev, pager, next, jumper" :total="1000"></el-pagination>
        </div>
      </div>
    </div>
    <el-dialog title="新增客戶" class="add-customer-dialog" :visible.sync="addCustomerVisible" width="680px" top="5%">
      <el-form :model="addCustomerFormData" label-position="top" inline>
        <div class="base-info">
          <div class="base">
            <el-form-item label="客戶姓名">
              <el-input v-model="addCustomerFormData.name" autocomplete="off" placeholder="客戶姓名"></el-input>
            </el-form-item>
            <el-form-item label="客戶編號">
              <el-input v-model="addCustomerFormData.name" autocomplete="off" placeholder="客戶編號"></el-input>
            </el-form-item>
            <el-form-item label="客戶分類">
              <el-select placeholder="客戶分類">
                <el-option></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="客戶來源">
              <el-select placeholder="客戶來源">
                <el-option></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="聯絡人咨詢">
              <el-input v-model="addCustomerFormData.name" autocomplete="off" placeholder="聯絡人咨詢"></el-input>
            </el-form-item>
            <el-form-item label="電子郵箱">
              <el-input v-model="addCustomerFormData.name" autocomplete="off" placeholder="電子郵箱"></el-input>
            </el-form-item>
            <el-form-item label="客戶地址">
              <el-input v-model="addCustomerFormData.name" autocomplete="off" placeholder="客戶地址"></el-input>
            </el-form-item>
            <el-form-item label="聯絡人電話">
              <el-input v-model="addCustomerFormData.name" autocomplete="off" placeholder="聯絡人電話"></el-input>
            </el-form-item>
            <el-form-item label="客戶簡介" style="width: 100%">
              <el-input type="textarea" rows="3"></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addCustomerVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAddCustomer">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'

export default {
  name: 'customer-management',
  components: { CountTo },
  data() {
    return {
      dataCountListData: [
        { title: '總客戶數', num: 1284, icon: 'customer-1' },
        { title: '本月新增', num: 156, icon: 'customer-2' },
        { title: '活躍客戶', num: 986, icon: 'customer-3' },
        { title: '客戶群組', num: 12, icon: 'customer-4' }
      ],
      tableData: [{}],
      addCustomerVisible: false,
      addCustomerFormData: {}
    }
  },
  methods: {
    addCustomer() {
      this.addCustomerVisible = true
    },
    editCustomer() {},
    submitAddCustomer() {},
    customerDetail() {
      this.$router.push('/customer-detail')
    }
  }
}
</script>

<style scoped lang="less">
.customer-container {
  .top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 15px;
    .data-count {
      margin-right: 15px;
      background: #fff;
      height: 108px;
      flex: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &-wrap {
        padding: 16px 18px;
        display: flex;
        justify-content: flex-start;
        align-items: end;
        flex-wrap: wrap;
        .left {
          margin-right: 16px;
          .title {
            font-size: 14px;
            line-height: 17px;
            margin-bottom: 14px;
          }
          .num {
            font-size: 24px;
            line-height: 24px;
          }
        }
      }
      > .svg-icon {
        font-size: 50px;
        margin-right: 31px;
      }
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .search-wrap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 20px;
    .left {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .el-input {
        width: 200px;
      }
      .el-select {
        width: 140px;
      }
      .el-date-picker {
        width: 150px;
      }
      .btn-list {
        margin-left: 15px;
      }
    }
  }
  .table-wrap {
    background: #fff;
    padding: 25px 30px;
    h4 {
      font-size: 18px;
      line-height: 25px;
      margin: 0 0 25px 0;
    }
    .el-table {
      .awatar-info-wrap {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-items: center;
        .svg-icon {
          font-size: 39px;
          margin-right: 10px;
        }
      }
      ::v-deep .cell {
        overflow: unset;
      }
      .group {
        padding: 5px 20px;
        font-size: 16px;
        line-height: 22px;
        background: rgba(60, 88, 252, 0.12);
        &.vip {
          color: #3c58fc;
        }
        &.normal {
          color: #58bcce;
        }
        &.future {
          color: #f9b280;
        }
      }
    }
    .table-foot {
      margin-top: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .statistics {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.5);
      }
    }
  }
}
</style>
